import React from 'react';
import styled from 'styled-components';

interface IProps {
  children?: any;
  onBack?: () => void
}
const HeaderBar: React.FC<IProps> = (props) => {
  const { children, onBack } = props;
  return <HeaderWrapper>
    <div className="left"
      onClick={() => { // 跳路由  history.goBack()
        onBack && onBack()
      }}
    > 👈 </div>
    <div className="title"> {children} </div>
    <div className="right"></div>
  </HeaderWrapper>
}

export default HeaderBar;


const HeaderWrapper = styled.header` 
  height: 40px;
  background: #50A7B7;
  display:flex;
  color: #fff;
  .left {
    flex: 2; 
    display:flex;
    justify-content: center;
    align-items:center;
  }
  .title {
    flex: 6; 
    display:flex;
    justify-content: center;
    align-items:center;
  }
  .right {
    flex: 2; 
    display:flex;
    justify-content: center;
    align-items:center;
  }
`;